<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" ></meta>
	<title>后台</title>
    <#include "common.html" />
    <style type="text/css">
        html {
            font-family: "Microsoft YaHei";
        }
       /*  #themes .gray {
            background-color: gray;
        }
        #themes .default {
            background-color: blue;
        }
        #themes .bootstrap {
            background-color: #D7EBF9;
        }
        #themes .black {
            background-color: black;
        }
        #themes .metro {
            background-color: #FFE57E;
        } */
        
        #roles .active{
        	background-color:pink;
        }
         #roles .cupertino{
          background-color: blue;
        }
        
        #topPanel{
        
        height:65px;
        overflow: hidden;
       	
        /*  background:  #EBF4FA url(../businessConsole/images/bg.jpg) no-repeat top left;  */
     		background:  #EBF4FA; 
 
        }
        
        /*隐藏 箭头 */
        #loginout .m-btn-downarrow{
        	display: none;
        } 
        
        /*隐藏 箭头 */
        #modifypwd .m-btn-downarrow{
        	display: none;
        }
    </style>
</head>

<body class="easyui-layout" id="mainLayout">

        <div id="topPanel" data-options="region:'north',border:false" >
        	<div style="float:left;font-size:22px;margin:12px 0 0 0;"><#--<img src="${request.contextPath}/images/admin_logo.jpg"/>--></div>
        	
        	<div style="float:right; margin-top: 10px;">
        		<a href="#" onclick="showModifyUserPwdDialog();" id="modifypwd"  class="easyui-menubutton"  
        		     data-options="iconCls:'icon-modify'">修改密码</a>
		        <!--<a href="javascript:void(0)"  id="themesMenu" class="easyui-menubutton"-->
		        	<!--data-options="menu:'#themes',iconCls:'icon-theme'">主题</a>  -->
				<!--<div id="themes" style="width:30px;">-->
					<!--<div class="cupertino">清泉</div>				    -->
				    <!--<div class="gray">灰霾</div>  -->
				    <!--<div class="default">天蓝色</div>  -->
				    <!--<div class="bootstrap">银色</div>  -->
				    <!--<div class="black">金属黑</div> -->
				    <!--<div class="metro">磁贴</div>-->
				<!--</div>-->
				
				 <a href="${request.contextPath}/admin/logout" id="loginout" class="easyui-menubutton"  data-options="iconCls:'icon-loginout'">退出</a>
				
			</div>
			
			<div style="text-align: right;margin-top: 40px;">
        		<p style="font-size: 16px;margin:10px 20px 0 20px" >欢迎您，${username}&nbsp;&nbsp;
        			<label id="loginRoleName">当前角色 ${roleNames[0]!}</label>
        		</p>
        	</div>
        </div>

        <div data-options="region:'west',title:'导航菜单'" style="width:160px;">
			<div id="menuAccordion" >
			</div>
        </div>

        <div data-options="region:'center'" style="padding:5px;background:#eee;">
            <div id="mainTab" class="easyui-tabs"  data-options="'border':false,'fit':true">
                <div title="首页" data-options="closable:false" style="background-color: #bcd6e9; background-image: url(/img/index.jpg);">
                	<iframe id="mainFrame" width="0" height="0" ></iframe>
                </div>
            </div>
        </div>
        
<script>
	$(document).ready(function(){
		if(!'${roleNames[0]!}'){
			$.messager.alert('提示', '请联系管理员分配角色与权限', 'info');
		}
	  	$('#loginout').on('click',function(){
	  		location.href= $(this).attr('href');
	  	});
	    
	});

	function createTabContent(url){
		return '<iframe style="width:100%;height:100%;" scrolling="auto" frameborder="0" src="'+ url+'"></iframe>';
	}

	//修改密码
	function showModifyUserPwdDialog(){
		var userDialog =  parent.ns.modalDialog({
	           title : '修改密码',
	           width : 400,
	           height : 200,
	           resizable : true,
	           url : '${request.contextPath}/easyui/userModifyPwd',
	           buttons : [{
	               text : '保存',
	               iconCls : 'icon-save',
	               handler : function(){
	                   userDialog.find('iframe').get(0).contentWindow.submitUser(userDialog,null,parent.$);
	               }
	           }]

	       });
	}

	$(function() {
		// 初始化
		$('#menuAccordion').accordion({
			fillSpace: true,
			fit: true,
			border: false,
			animate: false
		});

		$.get('/easyui/userMenus', {type: 1}, function(data) {
			if(data) {
				$.each(data, function(index, item) {
					// var selected = false;
					// if (index == 0) {
						selected = true;
					// }
					// Accordion 折叠面板
					$('#menuAccordion').accordion('add', {
						title: item.text,
						content: "<ul id='menu_tree_" + item.id + "'></ul>",
						//selected: selected,
						iconCls: 'icon-menu'
					});
					// 树形菜单
					$('#menu_tree_' + item.id).tree({
						data: item.children,
						onClick: function(node) {
							if (!node.attributes.url) {
								return;
							}
							// 添加选项卡
							openTab(node.text,node.attributes.url,node.iconCls);
						}
					});
				});
                $("#menuAccordion").accordion('getSelected').panel('collapse');

            }
		}, 'json');
	});

	function openTab(title,url,icon){
		if($('#mainTab').tabs('exists',title)){
			$('#mainTab').tabs('close',title);
		}
		$('#mainTab').tabs('add',{
			title:title,
			content:createTabContent(url),
			closable:true,
			icon:icon
		});

	}
</script>
</body>
</html>